<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Welcome to the world of Pling</title>

        <!-- stylesheets -->
        <h:outputStylesheet library="css" name="reset.css" />
        <h:outputStylesheet library="css" name="common.css" />
        <h:outputStylesheet library="css" name="frontend.css" />

        <!-- jquery and javascript -->
        <h:outputScript library="js" name="jquery-1.4.3.min.js" target="head" />
        <h:outputScript library="js" name="jquery.validate.min.js" target="head" />
        <h:outputScript library="js" name="scripts.js" target="head" />
        
    </h:head>
    <h:body>
        <div id="splash">
            <div style="margin-bottom: 20px;">
                <h:graphicImage url="/resources/images/logo.png" alt="obama" />
            </div>
            <h1>Welcome to the world of Pling!</h1>
            <fieldset>
                <legend>Login</legend>
                <h:form styleClass="validate">
                    <table border="0">
                        <tr>
                            <td><h:outputLabel for="login-email" value="E-mail: "/></td>
                            <td>
                                <h:inputText id="login-email" value="#{authBean.user.email}" styleClass="required email" required="true">
                                    <f:validateRegex pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}"/>
                                </h:inputText>
                                <h:message for="login-email" styleClass="error"/>
                            </td>
                        </tr>
                        <tr>
                            <td><h:outputLabel for="login-password" value="Password:"/></td>
                            <td>
                                <h:inputSecret id="login-password" value="#{authBean.user.password}" styleClass="required" required="true">
                                    <f:validateLength minimum="4" maximum="12"/>
                                </h:inputSecret>
                                <h:message for="login-password" styleClass="error"/>
                            </td>
                        </tr>
                    </table>
                    <h:commandButton value="Login" action="#{authBean.login}"/>
                </h:form>
            </fieldset>

            <fieldset>
                <legend>Registration</legend>
                <h:form id="registration" styleClass="validate">
                    <table border="0">
                        <tr>
                            <td><h:outputLabel for="registration-email" value="E-mail: "/></td>
                            <td>
                                <h:inputText id="registration-email" value="#{registrationBean.user.email}" styleClass="required email" required="true">
                                    <f:validateRegex pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}"/>
                                </h:inputText>
                                <h:message for="registration-email" styleClass="error"/>
                            </td>
                        </tr>
                        <tr>
                            <td><h:outputLabel for="registration-password" value="Password:"/></td>
                            <td>
                                <h:inputSecret id="registration-password" value="#{registrationBean.user.password}" styleClass="required" required="true">
                                    <f:validateLength minimum="4" maximum="12"/>
                                </h:inputSecret>
                                <h:message for="registration-password" styleClass="error"/>
                            </td>
                        </tr>
                        <tr>
                            <td><h:outputLabel for="registration-name" value="Name: "/></td>
                            <td>
                                <h:inputText id="registration-name" value="#{registrationBean.user.name}" styleClass="required" required="true"/>
                                <h:message for="registration-name" styleClass="error"/>
                            </td>
                        </tr>
                    </table>
                    <h:commandButton value="Create a user" action="#{registrationBean.register}"/>
                </h:form>
            </fieldset>
        </div>

    </h:body>
</html>